<template>
  <div class="details">
    <div class="box">
      <el-row>
        <el-col :span="12">
          <div class="content_box">
            <h4>阵地简介</h4>
            <div class="content_list">{{ detailsData[0].position_intro }}</div>
          </div>
          <div class="content_box">
            <h4>红色文化亮点</h4>
            <div class="content_list">
              {{ detailsData[0].culture_highlight }}
            </div>
          </div>
          <div class="content_box">
            <h4>视频作品</h4>
            <div class="content_list">
              <video
                :src="`http://127.0.0.1:8000${detailsData[0].video_path}`"
                controls=""
                style="height: 100%"
              />
            </div>
          </div>
          <div />
        </el-col>
        <el-col :span="12">
          <div class="content_box">
            <h4>参观信息</h4>
            <div class="content_list">
              <el-table :data="detailsData" border style="width: 100%">
                <el-table-column
                  prop="reservation_method"
                  label="预约方式"
                  align="center"
                />
                <el-table-column
                  prop="visit_duration"
                  label="参观时长（小时）"
                  align="center"
                />
                <el-table-column
                  prop="position_address"
                  label="阵地地址"
                  align="center"
                />
              </el-table>
            </div>
          </div>
          <div class="content_box">
            <h4>图文展示</h4>
            <div class="content_list">
              <img
                :src="`http://127.0.0.1:8000${detailsData[0].image_path}`"
                alt=""
                style="height: 100%"
              />
            </div>
          </div>

          <div class="content_box">
            <h4>展陈大纲</h4>
            <div class="content_list">
              {{ detailsData[0].exhibition_outline }}
            </div>
          </div>
          <div
        /></el-col>
      </el-row>
    </div>
    <img class="return" @click="rebackMap" src="@/assets/return.svg" alt="" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      detailsData: [],
    };
  },
  created() {
    this.detailsData.push(this.$route.query);
  },
  methods: {
    rebackMap() {
      window.history.go(-1);
    },
  },
};
</script>

<style lang="less" scoped>
.details {
  width: 100%;
  height: 100vh;
  background: url(../assets/bg.jpg) no-repeat;
  background-size: cover;
  display: flex;
  flex-flow: column nowrap;

  .box {
    width: 60%;
    height: 80vh;
    background: #fff;
    margin: auto;
    border-radius: 10px;
    box-shadow: inset 0 0 10px #000;
    padding: 20px;
    box-sizing: border-box;

    .content_box {
      position: relative;

      h4 {
        width: 90%;
        height: 30px;
        line-height: 30px;
        background: url(../assets/bg.jpg) no-repeat;
        background-size: cover;
        padding-left: 10px;
        color: #fff;
      }

      .content_list {
        width: 90%;
        height: 200px;
        margin: 5px;
        text-indent: 2em;
        overflow: auto;

        &::-webkit-scrollbar {
          display: none;
        }
      }

      span {
        position: absolute;
        right: 10%;
        bottom: 10px;
        cursor: pointer;
      }
    }
  }

  .return {
    position: absolute;
    right: 3%;
    top: 3%;
    width: 40px;
    height: 40px;
  }
}

/deep/ .el-scrollbar__wrap--hidden-default {
  display: flex;
}
</style>